<template>
  <div class="main">
    <div class="top-box">
      <el-row :gutter="10" style="margin-left: -20px; margin-right: -20px;">
        <el-col :xs="12" :sm="12" :lg="6"
                class=""
                style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">
          <div class="grid-content bg-purple top-little card-panel ">
            <!--  左侧图标-->
            <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">
              <svg t="1723815611653" class="icon svg-icon card-panel-icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="2331" width="48" height="48">
                <path
                  d="M1016.832 606.208q2.048 12.288-1.024 29.696t-10.24 35.328-17.408 32.256-22.528 20.48-21.504 6.144-20.48-4.096q-10.24-3.072-25.6-5.632t-31.232-1.024-31.744 6.656-27.136 17.408q-24.576 25.6-28.672 58.368t9.216 62.464q10.24 20.48-3.072 40.96-6.144 8.192-19.456 16.896t-29.184 15.872-33.28 11.264-30.72 4.096q-9.216 0-17.408-7.168t-11.264-15.36l-1.024 0q-11.264-31.744-38.4-54.784t-62.976-23.04q-34.816 0-62.976 23.04t-39.424 53.76q-5.12 12.288-15.36 17.92t-22.528 5.632q-14.336 0-32.256-5.12t-35.84-12.8-32.256-17.92-21.504-20.48q-5.12-7.168-5.632-16.896t7.68-27.136q11.264-23.552 8.704-53.76t-26.112-55.808q-14.336-15.36-34.816-19.968t-38.912-3.584q-21.504 1.024-44.032 8.192-14.336 4.096-28.672-2.048-11.264-4.096-20.992-18.944t-17.408-32.768-11.776-36.864-2.048-31.232q3.072-22.528 20.48-28.672 30.72-12.288 55.296-40.448t24.576-62.976q0-35.84-24.576-62.464t-55.296-38.912q-9.216-3.072-15.36-14.848t-6.144-24.064q0-13.312 4.096-29.696t10.752-31.744 15.36-28.16 18.944-18.944q8.192-5.12 15.872-4.096t16.896 4.096q30.72 12.288 64 7.68t58.88-29.184q12.288-12.288 17.92-30.208t7.168-35.328 0-31.744-2.56-20.48q-2.048-6.144-3.584-14.336t1.536-14.336q6.144-14.336 22.016-25.088t34.304-17.92 35.84-10.752 27.648-3.584q13.312 0 20.992 8.704t10.752 17.92q11.264 27.648 36.864 48.64t60.416 20.992q35.84 0 63.488-19.968t38.912-50.688q4.096-8.192 12.8-16.896t17.92-8.704q14.336 0 31.232 4.096t33.28 11.264 30.208 18.432 22.016 24.576q5.12 8.192 3.072 17.92t-4.096 13.824q-13.312 29.696-8.192 62.464t29.696 57.344 60.416 27.136 66.56-11.776q8.192-5.12 19.968-4.096t19.968 9.216q15.36 14.336 27.136 43.52t15.872 58.88q2.048 17.408-5.632 27.136t-15.872 12.8q-31.744 11.264-54.272 39.424t-22.528 64q0 34.816 18.944 60.928t49.664 37.376q7.168 4.096 12.288 8.192 11.264 9.216 15.36 23.552zM540.672 698.368q46.08 0 87.04-17.408t71.168-48.128 47.616-71.168 17.408-86.528-17.408-86.528-47.616-70.656-71.168-47.616-87.04-17.408-86.528 17.408-70.656 47.616-47.616 70.656-17.408 86.528 17.408 86.528 47.616 71.168 70.656 48.128 86.528 17.408z"
                  p-id="2332" fill="#1296db"></path>
              </svg>
            </div>
            <!--右侧文字-->
            <div data-v-52f34677="" class="card-panel-description font-box">
              <div data-v-52f34677="" class="card-panel-text text-box"> 设备总数</div>
              <span data-v-52f34677="" class="card-panel-num num-box">{{ shebeiTotal }}</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6"
                class=""
                style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">
          <div class="grid-content bg-purple top-little card-panel ">
            <!--  左侧图标-->
            <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">
              <svg t="1723858301981" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="3387" width="48" height="48">
                <path
                  d="M512 78.8c-239.3 0-433.2 194-433.2 433.2 0 239.3 194 433.2 433.2 433.2 239.3 0 433.2-194 433.2-433.2 0.1-239.2-193.9-433.2-433.2-433.2z m183.3 447.9L455.1 720c-12.3 9.9-30.5 1.1-30.5-14.6V318.7c0-15.7 18.2-24.5 30.5-14.6l240.2 193.4c9.4 7.5 9.4 21.7 0 29.2z"
                  fill="#089111" p-id="3388"></path>
              </svg>
            </div>
            <!--右侧文字-->
            <div data-v-52f34677="" class="card-panel-description font-box">
              <div data-v-52f34677="" class="card-panel-text text-box">产品种类</div>
              <span data-v-52f34677="" class="card-panel-num num-box">{{ zhongleiTotal }}</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6"
                class=""
                style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">
          <div class="grid-content bg-purple top-little card-panel ">
            <!--  左侧图标-->
            <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">
              <svg t="1723858448403" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="1570" width="48" height="48">
                <path
                  d="M766.208 958.336H269.696c-112.768 0-204.032-91.392-204.032-204.032V257.792c0-112.64 91.264-204.032 204.032-204.032h496.512c112.64 0 204.032 91.392 204.032 204.032v496.512c0 112.768-91.392 204.032-204.032 204.032z"
                  fill="#FF9429" p-id="1571"></path>
                <path
                  d="M705.408 743.04c-1.664-10.624-3.84-20.992-6.272-30.976-1.152-4.736-2.688-9.216-4.096-13.824-1.792-6.016-3.456-12.032-5.632-17.792-1.92-5.248-3.968-10.112-6.144-15.232-2.048-4.736-3.968-9.6-6.144-14.208-2.432-5.12-5.12-10.112-7.808-14.976-2.176-3.968-4.48-7.936-6.784-11.776-2.944-4.864-6.144-9.472-9.344-14.08-2.432-3.456-4.864-6.656-7.424-9.856-3.456-4.352-7.04-8.704-10.752-12.8-2.688-2.816-5.376-5.504-8.064-8.192-3.84-3.84-7.808-7.552-11.904-11.008-2.944-2.432-6.016-4.48-8.96-6.656-4.224-3.072-8.32-6.272-12.672-8.832-0.256-0.128-0.512-0.384-0.768-0.512-13.312-7.936-21.376-22.016-21.376-37.504v-17.536c0-15.488 8.192-29.568 21.376-37.504 0.256-0.128 0.512-0.384 0.768-0.512 4.352-2.688 8.448-5.76 12.672-8.832 3.072-2.176 6.016-4.224 8.96-6.656 4.096-3.456 7.936-7.168 11.904-11.008 2.688-2.688 5.504-5.376 8.192-8.192 3.712-4.096 7.296-8.32 10.752-12.672 2.56-3.2 4.992-6.528 7.424-9.856 3.2-4.48 6.4-9.216 9.344-14.08 2.432-3.84 4.608-7.808 6.784-11.776 2.688-4.864 5.376-9.856 7.808-14.976 2.176-4.608 4.224-9.344 6.144-14.208 2.048-4.992 4.224-9.984 6.144-15.232 2.048-5.76 3.84-11.776 5.632-17.792 1.408-4.608 2.944-9.088 4.096-13.824 2.56-10.112 4.608-20.48 6.272-30.976 0.128-0.896 0.384-1.664 0.512-2.56 4.096-26.752-16.384-51.072-43.52-51.072H373.376c-27.136 0-47.616 24.32-43.52 51.072 0.128 0.896 0.384 1.664 0.512 2.56 1.664 10.624 3.84 20.992 6.272 31.104 1.152 4.736 2.688 9.216 4.096 13.824 1.792 6.016 3.456 12.032 5.632 17.792 1.92 5.248 3.968 10.112 6.144 15.232 2.048 4.736 3.968 9.6 6.144 14.208 2.432 5.12 5.12 10.112 7.808 14.976 2.176 3.968 4.48 7.936 6.784 11.776 2.944 4.864 6.144 9.472 9.344 14.08 2.432 3.456 4.864 6.656 7.424 9.856 3.456 4.352 7.04 8.704 10.752 12.672 2.688 2.816 5.376 5.504 8.192 8.192 3.84 3.84 7.808 7.552 11.904 11.008 2.944 2.432 6.016 4.48 8.96 6.656 4.224 3.072 8.32 6.272 12.672 8.832 0.256 0.128 0.512 0.384 0.768 0.512 13.312 7.936 21.376 22.016 21.376 37.504v17.536c0 15.488-8.192 29.568-21.376 37.504-0.256 0.128-0.512 0.384-0.768 0.512-4.352 2.688-8.448 5.76-12.672 8.832-2.944 2.176-6.016 4.224-8.96 6.656-4.096 3.456-7.936 7.168-11.904 11.008-2.688 2.688-5.504 5.248-8.064 8.192-3.712 4.096-7.296 8.32-10.752 12.8-2.56 3.2-4.992 6.528-7.424 9.856-3.2 4.608-6.4 9.216-9.344 14.08-2.304 3.84-4.608 7.808-6.784 11.776-2.688 4.864-5.376 9.856-7.808 14.976-2.176 4.608-4.224 9.344-6.144 14.208-2.048 4.992-4.224 9.984-6.144 15.232-2.048 5.76-3.84 11.776-5.632 17.792-1.408 4.608-2.944 9.088-4.096 13.824-2.56 10.112-4.608 20.48-6.272 31.104-0.128 0.896-0.384 1.664-0.512 2.56-4.096 26.752 16.384 51.072 43.52 51.072h289.024c27.136 0 47.616-24.32 43.52-51.072-0.256-1.024-0.512-1.92-0.64-2.816z"
                  fill="#FFFFFF" p-id="1572"></path>
                <path
                  d="M415.872 755.712h204.16c7.68 0 11.264-9.728 5.248-14.592l-93.952-73.216c-1.92-1.536-2.944-3.84-2.944-6.4V425.856c0-2.304 1.024-4.48 2.688-6.016l55.936-45.952c5.504-5.12 1.92-14.336-5.632-14.336H454.4c-7.552 0-11.136 9.216-5.632 14.336l55.296 45.696c1.664 1.536 2.688 3.712 2.688 6.016v235.648c0 2.432-1.152 4.736-2.944 6.4L410.496 741.12c-5.888 4.992-2.432 14.592 5.376 14.592z"
                  fill="#FF9429" p-id="1573"></path>
              </svg>
            </div>
            <!--右侧文字-->
            <div data-v-52f34677="" class="card-panel-description font-box">
              <div data-v-52f34677="" class="card-panel-text text-box">工序数量</div>
              <span data-v-52f34677="" class="card-panel-num num-box">{{ gongxuTotal }}</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6"
                class=""
                style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">
          <div class="grid-content bg-purple top-little card-panel ">
            <!--  左侧图标-->
            <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">
              <svg t="1723858580276" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="2621" width="48" height="48">
                <path
                  d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480zM480 256v352a32 32 0 0 0 64 0V256a32 32 0 0 0-64 0z m-16 528a48 48 0 1 0 96 0 48 48 0 0 0-96 0z"
                  p-id="2622" fill="#d81e06"></path>
              </svg>
            </div>
            <!--右侧文字-->
            <div data-v-52f34677="" class="card-panel-description font-box">
              <div data-v-52f34677="" class="card-panel-text text-box"> 产品总数</div>
              <span data-v-52f34677="" class="card-panel-num num-box">{{ number }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="top-box">
      <div class="font">
        <span>生产进度</span>
      </div>
      <!--表格-->
      <el-table :data="stepReportConfigList">
        <el-table-column label="id" align="center" prop="id" v-if="false"/>
        <!--        <el-table-column label="工单编码" align="center" prop="tag"/>-->
        <!--        <el-table-column label="订单编号" align="center" prop="nodeType"/>-->
        <!--        <el-table-column label="客户名称" align="center" prop="type"/>-->
        <!--        <el-table-column label="产品编号" align="center" prop="name"/>-->
        <el-table-column label="产品名称" align="center" prop="cpName"/>
        <!--        <el-table-column label="规格型号" align="center" prop="sort"/>-->
        <!--        <el-table-column label="单位" align="center" prop="configJson"/>-->
        <el-table-column label="生产进度" align="center" prop="gzSchedulePercentage"/>
        <el-table-column label="计划完成时间" align="center" prop="completionTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.completionTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="需求日期" align="center" prop="completionTime"/>
        <el-table-column label="负责人" align="center" prop="personCharge"/>
      </el-table>
    </div>
    <!-- 快速跳转-->
    <div class="router-box"></div>
    <div class="top-box">
      <div class="font">
        <span>每月产量</span>
      </div>
      <div id="main" style="width: 100%;height: 400px;background-color:white;margin-top: 10px"></div>
    </div>


  </div>
</template>

<script>
import * as echarts from 'echarts'
import {listShebei} from "@/api/shebei/shebei";
import {listPlans} from "@/api/production/plans";
import {getEcharts} from "@/api";
import {listSteps} from "@/api/production/steps";
import {listManagement} from "@/api/production/management";

export default {
  name: "Index",
  data() {
    return {
      stepReportConfigList: [],
      shebeiTotal: 0,
      zhongleiTotal: 0,
      gongxuTotal: 0,
      echartsList: [],
      number: 0,
      listOne: []
    };
  },
  mounted() {
    // this.initPriceChart()
    this.myChart = echarts.init(document.getElementById('main'));
    this.getData()

  },
  created() {
    // 查
    this.getshebeiList()
    this.getzhongleiList()
    this.getgongxuList()
    this.getList()
    this.getzhongshu()
  },
  methods: {
    getList() {
      this.loading = true;
      listPlans(this.queryParams).then(response => {
        this.stepReportConfigList = response.rows;
        console.log(this.stepReportConfigList, '111');
      });
    },

    getgongxuList() {
      listSteps().then(response => {
        this.gongxuTotal = response.total;
      });
    },
    getzhongleiList() {
      listManagement().then(res => {
        this.zhongleiTotal = res.total;
        // let number = 0
        // res.rows.forEach(item => {
        //   console.log(item.quantity)
        //   number += item.quantity
        //   this.number = number
        // })
      })
    },
    getzhongshu() {
      let obj = {
        pageNum: 1,
        pageSize: 2000
      }
      listManagement(obj).then(res => {
        let number = 0
        res.rows.forEach(item => {
          number += item.quantity
          this.number = number
        })
      })
    },
    getshebeiList() {
      listShebei().then(response => {
        this.shebeiTotal = response.total
      });
    },
    // 获取数据echarts
    getData() {
      getEcharts().then(res => {
        this.echartsList = res.rows
        console.log(this.echartsList)
        this.initPriceChart(this.echartsList)
      })
    },
    initPriceChart(data) {
      // 指定图表的配置项和数据
      console.log(data)
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          data: data.map(item => item.productionMonth)
        },
        yAxis: {
          // type: 'value'
        },
// 也可以多加一些属性
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [
          {
            data: data.map(item => item.totalProduction),
            type: 'line',
            smooth: true
          }
        ],
        emphasis: {label: {show: true, position: 'top'}},
      })
    },

  }
};
</script>

<style scoped lang="scss">
.font {
  margin-bottom: 20px;
  margin-left: 20px;
  padding-top: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text-box {
  line-height: 18px;
  color: rgba(0, 0, 0, .45);
  font-size: 16px;
  margin-bottom: 12px;
}

.num-box {
  font-size: 20px;
}

.icon-box {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  -webkit-transition: all .38s ease-out;
  transition: all .38s ease-out;
  border-radius: 6px;
}

.font-box {
  float: right;
  font-weight: 700;
  margin: 26px;
  margin-left: 0;
}

.panel-group .card-panel .card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  -webkit-transition: all .38s ease-out;
  transition: all .38s ease-out;
  border-radius: 6px;
}

.top-little {
  //padding: 0 20px;
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  border-radius: 10px;
}

.main {
  background-color: rgb(239, 241, 244);
  padding: 32px;
  padding-top: 10px;
}

.top-box {
  margin-top: 10px;
  margin-left: -20px;
  margin-right: -20px;
  background-color: white;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  //background: #99a9bf;
}

.bg-purple {
  //background: #d3dce6;
}

.bg-purple-light {
  //background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.panel-group .card-panel .card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  -webkit-transition: all .38s ease-out;
  transition: all .38s ease-out;
  border-radius: 6px;
}

.panel-group .card-panel .icon-people {
  color: #40c9c6;
}

.panel-group .card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  border-radius: 10px;
}
</style>

